<template>
  <van-nav-bar title="购物车列表" left-text="" left-arrow @click-left="goBack" />
  <van-checkbox-group v-model="checked">
    <div class="cart" v-for="item in cartlist" :key="item.id">
      <van-checkbox :name="item.id"> </van-checkbox>
      <!-- 单元格 -->
      <van-swipe-cell>
        <!-- 卡片 -->
        <van-card
          :price="item.total"
          :title="item.product.name"
          class="goods-card"
          :thumb="item.product.thumbs_text"
          @click="toProductInfo(item.proid)"
        >
          <template #desc>
            <div style="color: #969799">库存：{{ item.product.stock }}</div>
            <div>单价：{{ item.price }}</div>
          </template>
          <template #num>
            <van-stepper v-model="item.nums" integer @click.stop="CahngeNums(item)" />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
  </van-checkbox-group>
  <van-submit-bar :price="total" button-text="确认订单" @submit="onSubmit">
    <van-checkbox v-model="checkedAll" @click="ChangeCheckAll">全选</van-checkbox>
  </van-submit-bar>
  <Footer />
</template>
<script setup>
import Footer from "@/components/common/footer.vue";
const { cookies } = useCookies();
const router = useRouter();
const checked = ref([]);
const LoginUser = reactive(cookies.get("LoginUser"));
const cartlist = ref([]);
const checkedAll = ref(false);
onMounted(() => {
  getCartData();
});
// 计算总价
const total = computed(() => {
  let num = 0;
  cartlist.value.forEach((item) => {
    if (checked.value.includes(item.id)) {
      num += parseFloat(item.total);
    }
  });

  // 计算选中商品时，是否全选
  if (checked.value.length > 0 && checked.value.length >= cartlist.value.length) {
    checkedAll.value = true;
  } else {
    checkedAll.value = false;
  }
  return num * 100;
});
// 购物车列表
const getCartData = async () => {
  let result = await Api.cartIndex({ busid: LoginUser.id });
  if (result.code == 1) {
    cartlist.value = result.data;
  }
};
const goBack = () => {
  router.push("/");
};
const ChangeCheckAll = () => {
  if (checkedAll.value == true) {
    cartlist.value.forEach((item) => {
      checked.value.push(item.id);
    });
  } else {
    checked.value = [];
  }
};
const CahngeNums = async (val) => {
  let data = {
    busid: LoginUser.id,
    id: val.id,
    nums: val.nums,
  };
  let result = await Api.cartEdit(data);
  if (result.code == 1) {
    getCartData();
  } else {
    showNotify({ type: "danger", message: result.msg });
  }
};
const del = (val) => {
  showConfirmDialog({
    title: "删除",
    message: `是否确认删除${val.product.name}？`,
  })
    .then(async () => {
      let data = {
        busid: LoginUser.id,
        id: val.id,
      };
      let result = await Api.cartDel(data);
      if (result.code == 1) {
        getCartData();
      } else {
        showNotify({ type: "danger", message: result.msg });
      }
    })
    .catch(() => {});
};
const toProductInfo = (id) => {
  router.push({
    path: "/product/product/info",
    query: {
      proid: id,
    },
  });
};
const onSubmit = () => {
  if (checked.value.length > 0) {
    router.push({
      path: "/product/cart/confirm",
      query: {
        ids: checked.value.toString(),
      },
    });
  } else {
    showNotify({ type: "danger", message: "没有订单结算商品" });
  }
};
</script>
<style scoped>
::v-deep .cart {
  display: flex;
  width: 100%;
}
::v-deep .van-swipe-cell {
  width: 100%;
}
.delete-button {
  height: 100%;
}
::v-deep .van-submit-bar {
  bottom: 55px;
}
</style>
